<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 
      px是一个长度(length)单位，事实上CSS中还有非常多的长度单位。
      ■整体可以分成两类：
        口绝对长度单位(Absolute length units);
          口它们与其他任何东西都没有关系，通常被认为总是相同的大小。
          口这些值中的大多数在用于打印时比用于屏幕输出时更有用，例如，我们通常不会在屏幕上使用cm。
          口惟—一个您经常使用的值，就是px(像素)。

        口相对长度单位(Relative length units);
          口相对长度单位相对于其他一些东西；
          口比如父元素的字体大小，或者视图端口的大小；
          口使用相对单位的好处是，经过一些仔细的规划，您可以使文本或其他元素的大小与页面上的其他内容相对应；
      ■相对长度单位：
        口em: 在font-size中使用是相对于父元素的font-size，
              在其他属性中使用是相对于自身的font-size，如width
        口rem: 相对于根元素(html)的font-size;
        口vw: 相对于视窗的宽度;
        口vh: 相对于视窗的高度;
        口vmin: 相对于视窗的宽度和高度中较小的那个;
        口vmax: 相对于视窗的宽度和高度中较大的那个;
        口%: 相对于父元素;
        口ch: 字符宽度;
        口ex: 字符高度的一半;     
    */
    .container {
      font-size: 15px;
    }

    .box {
      /* font-size: 20px; */
      /* 如果自己没有设置, 那么会继承父元素的font-size */

      /* 
      如果font-size中有写em单位, 可以理解成相对于父元素
      但是更准确的理解依然是相对于自己的
       */
      font-size: 1em;

      /* 1.em: 相对自己的font-size */
      width: 10em;
      height: 5em;
      background-color: orange;
    }
  </style>
</head>
<body>
  
  <div class="container">
    <div class="box">我是box</div>
  </div>

</body>
</html>